//
// Buttons
// --------------------------------------------------


// Base styles
// --------------------------------------------------

.btn {
  @include button-size($padding-base-vertical, ($padding-base-horizontal + 4), $font-size-base, $line-height-computed, $border-radius-base);
  @include box-shadow(none);
  font-weight: bold;
  cursor: default;
  background-clip: border-box;

  &:hover {
    @include box-shadow(0 1px 1px rgba(0, 0, 0, .1));
  }

  &:active,
  &.active {
    @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, .1));
  }
}


// Alternate buttons
// --------------------------------------------------

.btn-default {
  @include button-variant(#f5f5f5, #f1f1f1, $btn-default-color, $btn-default-border);
  text-shadow: 0 1px 0 $white;
  background-color: $btn-default-bg;

  &:hover {
    @include gradient-vertical($start-color: #f8f8f8, $end-color: #f1f1f1);
    @include box-shadow(0 1px 1px rgba(0, 0, 0, .1));
    @include transition(none);
    text-shadow: none;
    background-position: 0 0;
    border-color: #c6c6c6;
  }

  &:active,
  &.active,
  .open .dropdown-toggle & {
    @include gradient-vertical($start-color: #f6f6f6, $end-color: #f1f1f1);
    @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, .1));
    text-shadow: 0 1px 0 $white;
    background-color: #e8e8e8;
    border: 1px solid $btn-default-border;
  }

  &:focus {
    // Blue border on button focus.
    background-color: $btn-default-bg;
    border-color: $brand-primary;
    outline-style: none;
  }

  // Disabled state
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &:hover,
    &:focus,
    &:active {
      text-shadow: none;
      background-color: $btn-default-bg;
    }
  }

  .badge {
    color: $btn-default-bg;
    text-shadow: none;
  }
}

.btn-primary {
  @include button-variant($brand-primary, #4787ed, $btn-primary-color, $btn-primary-border);
}

// Success appears as green
.btn-success {
  @include button-variant($brand-success, $brand-success, $btn-success-color, $btn-success-border);
}

// Info appears as blue-green
.btn-info {
  @include button-variant($btn-info-bg, $btn-info-bg, $btn-info-color, $btn-info-border);
}

// Warning appears as orange
.btn-warning {
  @include button-variant(lighten($brand-warning, 5%), $brand-warning, $btn-warning-color, $btn-warning-border);
}

// Danger and error appear as red
.btn-danger {
  @include button-variant(#dd4b39, #d14836, $btn-danger-color, $btn-danger-border);
}

.btn-transparent {
  @include button-variant(transparentize($white, 1), transparentize($white, 1), $gray-dark, transparentize($white, 1));

  &.btn-xs {
    padding: 2px 4px;
  }
}


// Link buttons
// -------------------------

// Make a button look and behave like a link
.btn-link {
  color: $link-color;

  &,
  &:active,
  &[disabled],
  fieldset[disabled] & {
    @include box-shadow(none);
    background-color: transparent;
  }

  &,
  &:hover,
  &:focus,
  &:active {
    border-color: transparent;
  }

  &:hover,
  &:focus {
    @include box-shadow(none);
    color: $link-hover-color;
    background-color: transparent;
  }

  &[disabled],
  fieldset[disabled] & {
    &:hover,
    &:focus {
      color: $btn-link-disabled-color;
    }
  }
}


// Button Sizes
// --------------------------------------------------

.btn-lg {
  // line-height: ensure even-numbered height of button next to large input
  @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-base);
}

.btn-sm {
  // line-height: ensure proper height of button next to small input
  @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-base);
}

.btn-xs {
  @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-mini, $line-height-xs, $border-radius-small);
}
